<template>
  <px-scrollbar height="calc(100vh - 444px)">
    <div class="view-equip-detail">
      <div class="view-equip-title">报修信息</div>
      <div class="view-equip-wrap">
        <div class="view-equip-content">
          <div class="view-equip-item">
            <div class="label">维修任务名称</div>
            <div class="text">{{ taskDetailData.workOrderName }}</div>
          </div>
          <div class="view-equip-item">
            <div class="label">维修任务编号</div>
            <div class="text">{{ taskDetailData.workOrderCode }}</div>
          </div>
          <div class="view-equip-item">
            <div class="label">故障类型</div>
            <div class="text">{{ taskDetailData.faultTypeDesc }}</div>
          </div>
        </div>
        <div class="view-equip-content">
          <div class="view-equip-item">
            <div class="label">维修需求来源</div>
            <div class="text">{{ taskDetailData.maintenanceSourceDesc }}</div>
          </div>
          <div class="view-equip-item">
            <div class="label">关联单号</div>
            <div class="text">{{ taskDetailData.relatedOrderNum }}</div>
          </div>
          <div class="view-equip-item">
            <div class="label">故障等级</div>
            <div class="text">{{ taskDetailData.faultLevelDesc }}</div>
          </div>
        </div>
        <div class="view-equip-content">
          <div class="view-equip-item">
            <div class="label">是否需要停机</div>
            <div class="text">{{ taskDetailData.isStop === 1 ? "是" : taskDetailData.isStop === 0 ? "否" : "" }}</div>
          </div>
          <div class="view-equip-item large">
            <div class="label">故障描述</div>
            <div class="text">{{ taskDetailData.faultDesc }}</div>
          </div>
        </div>
        <div class="view-equip-content">
          <div class="view-equip-item plus">
            <div class="label">故障图片</div>
            <div class="text">
              <PhotoUpload photoType="view" :photoData="{ moduleName: 'eqp' }" :photoList="taskDetailData.repairImageList" />
            </div>
          </div>
        </div>
      </div>
      <div class="view-equip-title">维修措施/建议</div>
      <div class="view-equip-wrap">
        <div class="view-equip-content">
          <div class="view-equip-item plus">
            <div class="label">维修措施/建议</div>
            <div class="text">{{ taskDetailData.maintenanceAdvice }}</div>
          </div>
        </div>
      </div>
      <!-- TODO sop接口不满足，待提供 -->
      <!-- <px-table :data="fileTableData" class="equip-table" size="small" max-height="400" border>
      <px-table-column
        v-for="(item, index) in fileTableColumns"
        :key="index"
        :label="item.label"
        :min-width="item.minWidth"
        :show-overflow-tooltip="item.showOverflowTooltip"
      >
        <template #default="scope">
          <span v-if="item.type === 'size'">
            {{ scope.row.fileSize !== null ? byteToMb(scope.row.fileSize) : "" }}
          </span>
          <span v-else>
            {{ scope.row[item.prop] === 0 ? scope.row[item.prop] : scope.row[item.prop] ? scope.row[item.prop] : "-" }}
          </span>
        </template>
      </px-table-column>
      <px-table-column fixed="right" label="操作" min-width="160" align="center">
        <template #default="scope">
          <px-tooltip content="查看" placement="top">
            <px-button link type="primary" icon="Tickets" @click="handleView(scope.row)" />
          </px-tooltip>
          <px-tooltip content="下载" placement="top">
            <px-button link type="primary" icon="Download" @click="handleDownload(scope.row)" />
          </px-tooltip>
        </template>
      </px-table-column>
    </px-table> -->

      <div class="view-equip-title">派工信息</div>
      <div class="view-equip-wrap">
        <div class="view-equip-content">
          <div class="view-equip-item">
            <div class="label">计划维修时间</div>
            <div class="text">{{ taskDetailData.maintenancePlanTime }}</div>
          </div>
          <div class="view-equip-item">
            <div class="label">维修组</div>
            <div class="text">{{ taskDetailData.opsGroupNameDTO?.name }}</div>
          </div>
          <div class="view-equip-item">
            <div class="label">维修组成员</div>
            <div class="text">
              <px-tag v-for="item in taskDetailData.opsGroupNameDTO?.opsOperateList" :key="item.id" style="margin: 0 4px 4px 0" size="small">{{
                item.operateName
              }}</px-tag>
            </div>
          </div>
        </div>
        <div class="view-equip-content">
          <div class="view-equip-item">
            <div class="label">四级主管审批</div>
            <div class="text">
              {{ taskDetailData.isApproval === 1 ? "需要审批" : taskDetailData.isApproval === 0 ? "无需审批，仅通知" : "" }}
            </div>
          </div>
          <div class="view-equip-item">
            <div class="label">四级主管</div>
            <div class="text">{{ taskDetailData.approverName }}</div>
          </div>
        </div>
      </div>
      <p v-if="taskDetailData.isApproval === 1" class="title">审批信息</p>
      <px-table
        v-if="taskDetailData.isApproval === 1"
        :data="taskDetailData.approvalRecordDTOList"
        class="equip-table"
        size="small"
        min-height="100px"
        border
      >
        <px-table-column
          v-for="(item, index) in tableColumns"
          :key="index"
          :label="item.label"
          :min-width="item.minWidth"
          :show-overflow-tooltip="item.showOverflowTooltip"
        >
          <template #default="scope">{{
            scope.row[item.prop] === 0 ? scope.row[item.prop] : scope.row[item.prop] ? scope.row[item.prop] : "-"
          }}</template>
        </px-table-column>
      </px-table>
      <!-- 文件详情 -->
      <FileDetail v-model:visible="fileDetailVisible" :fileDetailData="fileDetailData" />
    </div>
  </px-scrollbar>
</template>
<script lang="ts" setup>
import { fileDetailAPI } from "@/api/knowledge/documentManage";
import PhotoUpload from "@/components/Upload/PhotoUpload.vue";
import FileDetail from "@/views/all/knowledge/documentManage/component/fileDetail.vue";
import { getCurrentInstance, onMounted, ref } from "vue";
import { useRoute } from "vue-router";
const route = useRoute();
// 父级传过来的值
const props = defineProps({
  taskDetailData: {
    type: Object,
    default: () => {}
  }
});
const fileTableData = ref<any>([]);
// TODO sop接口不满足，待提供
// const getSopData = async () => {
//   const { workOrderCode } = route.query;
//   if (workOrderCode) {
//     const data = await viewMaintainFileList({ workOrderCode });
//     fileTableData.value = data;
//   }
// };
onMounted(() => {
  // TODO sop接口不满足，待提供
  // getSopData();
});
const fileTableColumns = [
  { prop: "name", label: "文件名称", minWidth: "180", showOverflowTooltip: true },
  { prop: "fileSize", label: "文档大小(M)", minWidth: "140", type: "size", showOverflowTooltip: true },
  { prop: "updateTime", label: "修改时间", minWidth: "140", showOverflowTooltip: true },
  { prop: "updateByName", label: "修改人", minWidth: "140", showOverflowTooltip: true }
];
const byteToMb = bytes => {
  return (bytes / 1024 / 1024).toFixed(2);
};
// 文件详情
const fileDetailData = ref<any>([]);
const fileDetailVisible = ref(false);
const handleView = async row => {
  fileDetailData.value = await fileDetailAPI({ id: row.id });
  fileDetailVisible.value = true;
};
// 下载
const { proxy } = getCurrentInstance();
const handleDownload = row => {
  (proxy as any).download("post", "/dms/api/v1/doc/download", { id: [row.id] }, row.name);
};
const tableColumns = [
  { prop: "approverName", label: "审批人", minWidth: "120", showOverflowTooltip: true },
  { prop: "approvalTime", label: "审批时间", minWidth: "120", showOverflowTooltip: true },
  { prop: "approvalResultDesc", label: "审批结果", minWidth: "120", showOverflowTooltip: true },
  { prop: "approvalOpinion", label: "审批意见", minWidth: "120", showOverflowTooltip: true }
];
</script>

<style lang="scss" scoped>
@import url("./style.scss");

.title {
  margin: 20px 0;
  font-size: 16px;
  font-weight: 700;
  color: #000;
}
</style>
